<template>
    <div class="pav-home">
        <div class="pav-nav pav-row pav-row-space-between">
            <div class="pav-row">
                <div class="pav-nav-logo">PAVLOV LOGO</div>
                <el-radio-group v-model="chosenNavIndex">
                    <el-radio-button v-for="(btn,i) in navBtnGroup" :key="i" :label="i">
                        {{ btn.name }}
                    </el-radio-button>
                </el-radio-group>
            </div>
            <template>
                <el-popover
                    placement="bottom"
                    width="200"
                    trigger="hover">
                    <div>
                        登录
                    </div>
                    <el-button plain type="text" icon="el-icon-user-solid"
                               slot="reference" class="pav-login-btn">登录
                    </el-button>
                </el-popover>
            </template>
        </div>
        <el-container>
            <template>
                <aside class="pav-aside el-aside">
                    <div class="pav-row" style="align-items: flex-start;">
                        <div class="pav-aside-inner pav-col">
                            <div class="pav-season-card pav-col">
                                <span class="pav-text pav-season-hint">当前赛季：</span>
                                <div class="pav-text-divider"></div>
                                <span class="pav-text pav-season-hint">Season 1</span>
                            </div>
                            <div class="pav-aside-divider"></div>
                            <div class="pav-season-card pav-col">
                                <span class="pav-text pav-season-hint">赛季时间：</span>
                                <div class="pav-text-divider"></div>
                                <span class="pav-text pav-season-hint pav-season-time">2021-09-01</span>
                                <span class="pav-text pav-season-hint pav-season-time">至</span>
                                <span class="pav-text pav-season-hint pav-season-time">2021-10-15</span>
                            </div>
                            <div class="pav-aside-divider"></div>
                            <div class="pav-ann-card">
                                <span class="pav-text pav-ann-text">
                                    PAVLOV [CN]chinese server! 积分榜！欢迎加群讨论：384252767
                                </span>
                            </div>
                        </div>
                        <div class="pav-aside-border"></div>
                    </div>
                </aside>
            </template>
            <el-main class="pav-container">
                <RankList></RankList>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import RankList from "@/components/RankList";

export default {
    name: 'Home',
    components: {RankList},
    data() {
        return {
            navBtnGroup: [
                {name: "首页", action: ""},
                {name: "服务器列表", action: ""},
            ],
            chosenNavIndex: 0,
        }
    },
    methods: {
        clickNav(index) {
            this.chosenNavIndex = index;
        }
    }
}
</script>
<style lang="scss">
@import "src/assets/css/Home";

.el-radio-button__inner {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.is-active {
    .el-radio-button__inner {
        background: black !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
}

.el-aside {
    margin: 0;
    padding: 0;
}
</style>
